<template>
  <view class="cell-box" v-for="(item, index) in clients" :key="index">
    <view class="weui-cell" @click="onClientSelected" :data-index="index">
      <view class="weui-cell__bd">
        <view>
          <text style="font-weight: bold">{{ item.name }}</text>
        </view>
        <view>
          <text :class="'sext' + item.sex">{{
            item.sex == 1 ? '男' : '女'
          }}</text>
          <text style="margin-left: 10rpx">{{ item.age }}周岁</text>
          <text style="margin-left: 10rpx">{{ item.mobile }}</text>
        </view>
      </view>
      <view class="weui-cell__ft">
        <text
          v-if="act == 'select'"
          style="
            display: inline-block;
            padding: 15rpx 30rpx;
            border: 1rpx solid #0bb584;
            color: #0bb584;
            font-weight: bold;
            border-radius: 10rpx;
            font-size: 28rpx;
            overflow: hidden;
          "
        >
          选择
        </text>
        <text
          v-else
          @click="removeClient"
          :data-id="item.id"
          style="
            display: inline-block;
            padding: 15rpx 30rpx;
            border: 1rpx solid #eeeeee;
            color: #f13e6d;
            border-radius: 10rpx;
            font-size: 28rpx;
            overflow: hidden;
          "
        >
          移除
        </text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref, toRaw } from 'vue'
const act = ref('')
// 就诊人
const clients = ref([])
onLoad(options => {
  console.log('clients页面', options)
  act.value = options.act
  // 判断来自哪个页面
  if (options.act == 'select') {
    uni.setNavigationBarTitle({
      title: '请选择服务对象'
    })
  } else {
    uni.setNavigationBarTitle({
      title: '服务对象管理'
    })
  }
  getClients()
})
const app = getApp()
// 获取就诊人信息
const getClients = () => {
  app.globalData.utils.request({
    url: '/User/clients',
    success: ({ data }) => {
      console.log('获取就诊人信息', data)
      clients.value = data.data.clients
    }
  })
}
// 选择人员
const onClientSelected = e => {
  if (act == '') return
  console.log(' 被选中的就诊人信息', e)
  const index = e.currentTarget.dataset.index
  const clientData = clients.value[index]
  // 被选中的就诊人信息
  uni.$emit('clientChange', toRaw(clientData))
  // 选择好就诊人以后 回到上一级页面
  uni.navigateBack()
}
// 移除人员
const removeClient = () => {
  console.log('移除人员')
}
</script>

<style>
@import './index.css';
</style>
